<template>
    <bg-lay-out :hideTopBar="true" :hideMarginLeft="true" :hideMask="true" :widthSize="true" :background="'url(../../../../../static/img/cyy/cyy_bg.jpg) left top no-repeat / 100% 100%'">
        <div slot="main" class="cloudStorehouse">
            <div class="waterPolo">
              <liquidfill-chart></liquidfill-chart>
            </div>
            <div class="dataDisplay">
                <top-logo-title>
                    <div slot="topTitle">产业园云仓数据</div>
                </top-logo-title>
                <div class="chart">
                    <!-- 各月合同销售额 -->
                    <div class="tradingIn">
                        <main-title>
                          <span slot="title">近一年交易走势</span>
                        </main-title>
                        <line-chart v-model="tradingInArr" :chartStyle="'width:422px;min-height:200px;'" :option="lineChartOption"></line-chart>
                    </div>
                </div>
            </div>
        </div>
    </bg-lay-out>
</template>
<script>
import topLogoTitle from "@/components/cyy/topLogoTitle";
import lineChart from "@/components/Charts/lineChart";
import ICountUp from "vue-countup-v2";
import bgLayOut from "@/components/bgLayOut/index";
import liquidfillChart from "@/components/Charts/liquidfillChart.vue"
export default {
  name: "sellAnalysis",
  components: {
    topLogoTitle,
    ICountUp,
    bgLayOut,
    lineChart,
    liquidfillChart
  },
  data() {
    return {
      lineChartOption: {
        label: {
          show: true
        },
        xAxis: {
          axisLabel: {
            rotate: 0
          },
          axisTick: {
            interval: 0
          }
        },
        startColor: "rgba(40,231,135,1)",
        endColor: "rgba(40,231,135,0.4)"
      },
      tradingInArr: []
    };
  },
  mounted() {
    this.setData();
  },
  methods: {
    setData() {
      var newArr = [
        {
          name: "1月",
          value: 140
        },
        {
          name: "2月",
          value: 160
        },
        {
          name: "3月",
          value: 180
        },
        {
          name: "4月",
          value: 150
        },
        {
          name: "5月",
          value: 170
        },
        {
          name: "6月",
          value: 180
        },
        {
          name: "7月",
          value: 190
        },
        {
          name: "8月",
          value: 200
        },
        {
          name: "9月",
          value: 180
        },
        {
          name: "10月",
          value: 177
        },
        {
          name: "11月",
          value: 175
        },
        {
          name: "12月",
          value: 160
        }
      ];
      this.$set(this, "tradingInArr", newArr);
    }
  }
};
</script>

<style scoped lang="scss">
@import "../../../../styles/base/_parameters";

.cloudStorehouse {
  .waterPolo {
    @include absoluteAllSides(0, 0, 0, 0, 1);
  }
  .dataDisplay {
    @include absoluteAllSides(0, 0, 0, 0, 10);

    & .chart {
      @include absoluteAllSides(150, 40, 0, 75, 1);
    }
  }
}
</style>